<template>
  <div class="vux-demo">
    <br/>
    <flexbox class="vux-1px-tb" :gutter="0">
      <flexbox-item class="vux-1px-r test"><div>北京</div></flexbox-item>
      <flexbox-item class="vux-1px-r test"><div>上海</div></flexbox-item>
      <flexbox-item class="vux-1px-r test"><div>广州</div></flexbox-item>
      <flexbox-item class="vux-1px-r test"><div>深圳</div></flexbox-item>
      <flexbox-item class="test"><div>其他</div></flexbox-item>
    </flexbox>
    <flexbox class="vux-1px-b" :gutter="0">
      <flexbox-item class="vux-1px-r test"><div>天津</div></flexbox-item>
      <flexbox-item class="vux-1px-r test"><div>西安</div></flexbox-item>
      <flexbox-item class="vux-1px-r test"><div>重庆</div></flexbox-item>
      <flexbox-item class="vux-1px-r test"><div>杭州</div></flexbox-item>
      <flexbox-item class="test"><div>其他</div></flexbox-item>
    </flexbox>
    <flexbox class="vux-1px-b" :gutter="0">
      <flexbox-item class="vux-1px-r test"><div>南京</div></flexbox-item>
      <flexbox-item class="vux-1px-r test"><div>武汉</div></flexbox-item>
      <flexbox-item class="vux-1px-r test"><div>成都</div></flexbox-item>
      <flexbox-item class="vux-1px-r test"><div></div></flexbox-item>
      <flexbox-item class="test"><div>其他</div></flexbox-item>
    </flexbox>
    <br/>
    <br/>
    <flexbox class="vux-1px-tb" :gutter="0">
      <flexbox-item class="vux-1px-r">
        <a class="item item1" href="/gz/326/0-0/0-0-0-0-0" mon="position=1&content=美食">
          <div class="img meishi"></div>
          <div class="text">美食</div>
        </a>
      </flexbox-item>
      <flexbox-item class="vux-1px-r">
        <a class="item item2" href="/gz/326/0-0/0-0-0-0-0" mon="position=1&content=美食">
          <div class="img dianying"></div>
          <div class="text">电影</div>
        </a>
      </flexbox-item>
      <flexbox-item class="vux-1px-r">
        <a class="item item3" href="/gz/326/0-0/0-0-0-0-0" mon="position=1&content=美食">
          <div class="img jiudian"></div>
          <div class="text">酒店</div>
        </a>
      </flexbox-item>
      <flexbox-item>
        <a class="item item4" href="/gz/326/0-0/0-0-0-0-0" mon="position=1&content=美食">
          <div class="img yule"></div>
          <div class="text">休闲娱乐</div>
        </a>
      </flexbox-item>
    </flexbox>
    <flexbox class="vux-1px-b" :gutter="0">
      <flexbox-item class="vux-1px-r">
        <a class="item item5" href="/gz/326/0-0/0-0-0-0-0" mon="position=1&content=美食">
          <div class="img huoguo"></div>
          <div class="text">火锅</div>
        </a>
      </flexbox-item>
      <flexbox-item class="vux-1px-r">
        <a class="item item6" href="/gz/326/0-0/0-0-0-0-0" mon="position=1&content=美食">
          <div class="img lvyou"></div>
          <div class="text">旅游</div>
        </a>
      </flexbox-item>
      <flexbox-item class="vux-1px-r">
        <a class="item item7" href="/gz/326/0-0/0-0-0-0-0" mon="position=1&content=美食">
          <div class="img daijinquan"></div>
          <div class="text">代金券</div>
        </a>
      </flexbox-item>
      <flexbox-item>
        <a class="item item8" href="/gz/326/0-0/0-0-0-0-0" mon="position=1&content=美食">
          <div class="img ktv"></div>
          <div class="text">KTV</div>
        </a>
      </flexbox-item>
    </flexbox>
    <br/>
    <br/>
    <div style="padding: 10px;">
      <p>对比不做处理的1px边框</p>
      <br/>
      <div style="height:10px;border:1px solid #e0e0e0"></div>
      <br/>
      <p>方案来自于 <a href="http://frozenui.github.io/frozenui/demo/">FrozenUI</a></p>
    </div>
  </div>
</template>

<script>
import { Flexbox, FlexboxItem } from '../components'
export default {
  components: {
    Flexbox,
    FlexboxItem
  }
}
</script>

<style scoped lang="less">
@import '../styles/1px.less';

.vux-demo .test{
  height:50px;
  text-align:center;
  line-height: 50px;
}

.vux-demo .vux-flexbox {
  background-color: #fff;
}

.item {
  display: block;
  box-sizing: border-box;
  font-size: 12px;
  color: #303030;
  position: relative;
  margin-bottom: 10px;
}


.img {
  width: 40px;
  height: 40px;
  margin: 8px auto 5px;
  background-repeat: no-repeat;
  background-size: 40px auto!important;
  background-position: center;
}

.text {
  font-size: 13px;
  text-align: center;
  line-height: 1em;
}


.meishi {
  background: url() no-repeat
}

.dianying {
  background: url() no-repeat
}

.jiudian {
  background: url() no-repeat
}

.yule {
  background: url() no-repeat
}

.huoguo {
  background: url() no-repeat
}

.zizhucan {
  background: url() no-repeat
}

.daijinquan {
  background: url() no-repeat
}

.ktv {
  background: url() no-repeat
}

.xiaochi {
  background: url() no-repeat
}

.dangao {
  background: url() no-repeat
}

.shenghuo {
  background: url() no-repeat
}

.gouwu {
  background: url() no-repeat
}

.lvyou {
  background: url() no-repeat
}

.xiyu {
  background: url() no-repeat
}

.jinri {
  background: url() no-repeat
}

.gengduo {
  background: url() no-repeat
}

.liren {
  background: url() no-repeat
}

.yanchu {
  background: url(http://newebapp0.nuomi.bdimg.com/static/img/29dc256d21296a9476b03a5183eccdff.png) no-repeat
}

.chuancai {
  background: url() no-repeat
}

.meishi-1 {
  background: url(http://newebapp0.nuomi.bdimg.com/static/img/08190c94440e7f89f64431b0b190e242.png) no-repeat
}

.dianying-1 {
  background: url(http://newebapp0.nuomi.bdimg.com/static/img/119f0b497f0e056cb9d528a36752eb8e.png) no-repeat
}

.jiudian-2 {
  background: url() no-repeat
}

.yule-2 {
  background: url() no-repeat
}

.huoguo-2 {
  background: url() no-repeat
}

.zizhucan-2 {
  background: url() no-repeat
}

.daijinquan-2 {
  background: url() no-repeat
}

.ktv-2 {
  background: url() no-repeat
}

.xiaochi-2 {
  background: url() no-repeat
}

.dangao-2 {
  background: url() no-repeat
}

.shenghuo-2 {
  background: url() no-repeat
}

.gouwu-2 {
  background: url() no-repeat
}

.lvyou-2 {
  background: url() no-repeat
}

.xiyu-2 {
  background: url() no-repeat
}

.jinri-2 {
  background: url() no-repeat
}

.gengduo-2 {
  background: url() no-repeat
}

.liren-2 {
  background: url() no-repeat
}

.yanchu-2 {
  background: url(http://newebapp0.nuomi.bdimg.com/static/img/8ef8b87a339619dbb6e73880fadeeb2d.png) no-repeat
}

.chuancai-2 {
  background: url() no-repeat
}

</style>
